import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import cacheManagementDetailService from "@/modules/systemManagement/cacheManagementDetail.service";
import useNavigator from "@/hooks/useNavigator";
import { useStore as useUserStore } from "@/store/user";
import { message, Modal } from "ant-design-vue";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: ["refresh"],
      },
      dataSource: [],
      columns: [
        {
          title: "缓存类型说明",
          dataIndex: "tagName",
          align: "center",
          width: "120px",
        },
        {
          title: "备注说明",
          dataIndex: "desc",
          align: "center",
          width: "350px",
        },
        {
            fixed: "right",
            title: "操作",
            dataIndex: "operation",
            align: "center",
            width: "120px",
          },
      ],
      loading: false,
      searchForm: {
      },
    } as any);
    // // 表格状态变更
    // const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
    //   state.pagination.current = pag.current;
    //   state.pagination.pageSize = pag.pageSize;
    // };
    // // 选中项变更
    // const onSelectChange = (changableRowKeys: any[]) => {
    //   state.selectedRowKeys = changableRowKeys;
    // };
    // const rowSelection = computed(() => {
    //   return {
    //     selectedRowKeys: state.selectedRowKeys,
    //     fixed: true,
    //     onChange: onSelectChange,
    //   };
    // });
    // 服务
    const $service = new cacheManagementDetailService();
    // 表格节点
    const LTableRef = ref(null as any);

    return () => (
      <Page>
        <CardWithTitle title="缓存标签管理">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
            //   pagination={state.pagination}
            //   onChange={tableChangeHandler}
              //row-selection={rowSelection.value}
              loading={state.loading}
              rowKey="id"
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  // 操作栏
                  if (column.dataIndex === "operation") {
                    return (
                           <div class="operation">
                          {
                                 <a-button
                              type="primary"
                              size="small"
                              onClick={() => {
                                  $service.delete({tagName:record.tagName}).then((res:any)=>{
                                    message.success("清除缓存数据成功")
                                  })
                              }}
                            >
                              一键清除
                            </a-button>
                          }
                        </div>
                      );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    );
  },
});